import React, { useEffect } from 'react'
import { Form, Card, Button, Input, Space, message } from 'antd'
import { useNavigate, useParams } from 'react-router-dom'
import {
  reqAddHospitalSet,
  reqGetHospitalSet,
  reqEditHospitalSet,
} from '@api/hospital/hospitalSet'

export default function HospitalSetAddOrUpdate() {
  const navigate = useNavigate()
  // 获取路由参数
  const { id } = useParams()

  // 创建form实例
  const [form] = Form.useForm()

  useEffect(() => {
    // debugger //在代码中打断点
    // 注意: 添加和修改是同一个组件,但是添加不获取数据,修改才获取数据
    // 问题: 如何判断这一次是添加还是修改 有id就是修改,没有id就是添加
    async function fetch() {
      if (id) {
        // 获取指定医院数据
        const result = await reqGetHospitalSet(id)
        // console.log(result)
        // 将医院数据添加到修改表单中
        form.setFieldsValue(result)
      }
    }
    fetch()
  }, [])
  // 保存按钮的事件处理函数
  async function onFinish(values: any) {
    //判断如果有id则是修改,没有id则是添加
    if (id) {
      values.id = id
      await reqEditHospitalSet(values)

      // 提示用户
      message.success('修改成功')
    } else {
      // 添加医院设置
      // 1. 先拿到表单里的所有数据
      // 2. 调用发请求添加的函数时,传入这个数据
      await reqAddHospitalSet(values)
      // // 3. 成功之后,回调医院设置界面
      // navigate('/syt/hospital/hospitalSet')
      // 提示用户
      message.success('添加成功')
    }
    // 3. 成功之后,回调医院设置界面
    navigate('/syt/hospital/hospitalSet')
  }
  return (
    <Card>
      <Form
        form={form} //绑定form实例和Form组件
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 22 }}
        onFinish={onFinish}
      >
        <Form.Item
          name="hosname"
          label="医院名称"
          rules={[
            {
              required: true,
              message: '请输入医院名称',
            },
          ]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          name="hoscode"
          label="医院编码"
          rules={[
            {
              required: true,
              message: '请输入医院编码',
            },
          ]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          name="apiUrl"
          label="api基础路径"
          rules={[
            {
              required: true,
              message: '请输入api基础路径',
            },
          ]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          name="contactsName"
          label="联系人姓名"
          rules={[
            {
              required: true,
              message: '请输入联系人姓名',
            },
          ]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item
          name="contactsPhone"
          label="联系人手机"
          rules={[
            {
              required: true,
              message: '请输入正确的手机号',
              pattern: /^1[3-9]\d{9}$/, //正则
            },
          ]}
        >
          <Input></Input>
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 2 }}>
          <Space>
            {/* 注意: 只有写了htmlType="submit"的按钮,才是当前表单的提交按钮. 只有点了提交按钮,form表单中的表单校验才会生效 */}
            <Button type="primary" htmlType="submit">
              保存
            </Button>
            <Button
              onClick={() => {
                navigate(-1)
              }}
            >
              返回
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  )
}
